Using Callout and Quick JavaScript Library Objects

This JavaScript capability for callouts and quick callouts allows you to:

Execute Javascript Function: Allows you to call any custom JavaScript function from the callout (or quick callout) instance dynamic (add the JavaScript functions to the Source tab in the Callout Editor).

Inject JavaScript: Allows you to add JavaScript to the HTML body of the callout (or quick callout) instance in runtime.

To view the Callout and Quick JavaScript object types and their properties and functions:

1.

Open the Direct.Shared.Library under References > Library References.

2.

Select Quick.

3.

Select Callout.

4.

For details on the functions, see Callout and Quick JavaScript Library Objects.

To test using the Inject JavaScript function:

1.

Download the InjectJavaScript_Callouts sample project from here. This project includes a quick callout that enables you to select Inject JavaScript.

2.

Run the project.

3.

Open the Quick callout.

4.

Click Inject JavaScript. This sets the Boolean Trigger - Quick business entity value to True.

5.

The Quick Trigger is modified event is triggered.

6.

An alert message pops up. This is as a result of injecting the following JavaScript:

alert('NEW YEAR THEME! JAVA SCRIPT will replace NEVA image with new year picture, and will update status in a text field');

7.

Click OK.

8.

The IMG1 in the body of the quick callout is replaced as a result of injecting the following JavaScript:

var im = document.getElementById('IMG1');im.src ='direct:dproj_CsnSjQ3X4Lud8F7rqGbD7w.p37153.jpg';

In our example, the JavaScript itself is saved in a business entity that is used as a parameter for the function.

The image name used in the JavaScript is visible in the Properties pane.

9.

Similarly, the status_field value in the quick callout is replaced as a result of injecting the following JavaScript:

document.getElementById('status_field').value = "JS is injected!";

To test using the Execute JavaScript function:

1.

Download the ExecuteJSFunction_Callouts sample project from here. The project includes a quick callout that enables you to select Execute JavaScript.

2.

Run the project.

3.

Open the Quick callout.

4.

Click Execute JavaScript. This sets the Boolean Trigger - Quick business entity value to True.

5.

The Execute JS Function in Quick event is triggered.

6.

For purposes of this example, use setValue, a built-in function in the callout.

The setValue function is executed with the parameters Value is set by JS and idTestFields. This sets the value of the idTestFields field in the quick callout to Value is set by JS . This function requires two parameters, as shown in the source code.

Typically, you would execute your own JavaScript function added to the Source tab in the Callout Editor.

The id parameter required by this function can be viewed in the Source tab of the Callout Editor.